<template>
  <div class="header_history">
    <div class="header_content">
      <div class="left_back" @click="$router.go(-1)"><img src="../../../assets/img/back.png" alt=""></div>
      <div class="right_mess"><span>{{ '' }}</span></div>
      <div class="right_back">
        <div class="service">
          <img @click="goOnline()" :src="Service" alt/>
        </div>
        <van-popover v-model="showPopover" trigger="click" placement="bottom-end" :actions="actions"
                     @select="onSelect">
          <template #reference>
            <div class="iconfont icon-icon_A">
            </div>
          </template>
        </van-popover>


      </div>
    </div>
  </div>
</template>

<script>
import Service from "@/assets/home/icon_talk.png";
import * as api from "@/axios/api";

export default {
  name: 'headers',
  props: ['mess'],
  data() {
    return {
      Service,
      onlineService: "",
      showPopover: false,
      actions: [
        // {text: 'ZH-TW', icon: require('@/assets/ico/Chinese.png'), lang: 'zh-CN', translate: 'chinese_simplified'},
        {text: '繁體中文', icon: require('@/assets/ico/tw.png'), lang: 'tww', translate: 'chinese_traditional'},

        {text: 'English', icon: require('@/assets/ico/english.png'), lang: 'en', translate: 'english'},
        {text: 'ภาษาไทย', icon: require('@/assets/ico/ภาษาไทย.png'), lang: 'thai', translate: 'thai'},
        {text: 'Japanese', icon: require('@/assets/ico/Japanese.png'), lang: 'jp', translate: 'japanese'},
        {text: 'India', icon: require('@/assets/ico/in.png'), lang: 'India', translate: 'hindi'},
        {text: 'Singapore', icon: require('@/assets/ico/sg.png'), lang: 'sg', translate: 'singapore'}
      ],
    }
  },
  methods: {
    onSelect(e) {
      console.log("翻译翻译翻译翻译翻译翻译", e)
      this.$i18n.locale = e.lang;
      window.localStorage.setItem('language', e.lang);
      translate.changeLanguage(e.translate)
      // translate.listener.start();	//开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
      // translate.execute(); //执行翻译初始化操作，显示出select语言选择
    },
    goOnline() {
      this.$router.push('/service');
    },
    async getInfoSite() {
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      }
      else {
        Toast(data.msg)
      }
    },
  },
  mounted() {
    this.getInfoSite()
  }
}
</script>

<style scope lang="less">
.header_history {
  width: 100%;
  height: 1.6256rem;
  display: flex;
  align-items: center;
  padding-right: 0.25rem;

  > div {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .left_back {
    width: .6513rem;
    height: 1.0513rem;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .right_back {
    width: 17%;
    height: 1.0513rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .service {
      width: 0.5rem;
      height: 0.5rem;

      img {
        width: 0.5rem;
        height: 0.5rem;

      }
    }

  }

  .right_mess {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    > span {
      margin-right: .5128rem;
    }
  }

  img {
    width: 50%;
    height: 50%;
  }
}
</style>
